#{extends 'mainSideBar.html' /}
#{set title:'Browse' /}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Browse Topics</title>

	
	
<script type="text/javascript">
	$(function() {
		$('#topicOptions').hide();
		$('#topicOptions').slideDown(1000);
		javascript: showTopicsCreated();
		$('#createdTopics').hide();
		javascript: showTopicsManaged();
		$('#managedTopics').hide();
		javascript: showTopicsFollowed();
		$('#followedTopics').hide();
	});
</script>	


<script type="text/javascript">
	function showTopicsCreated() {
		var user = '${user}';
		$
				.getJSON(
						'@{BrowseController.browseCreatedTopics()}',
						{
							'userName' : user
						},
						function(data) {
							var topics = data.createdTopics;
							var topicsPart = "";
							if (topics == null || topics == "") {
								document.getElementById("createdTopics").innerHTML = "No topics to show";
							} else {
								var x = topics.split("&&");
								topicsPart = "";
								for ( var i = 0; i < x.length-1; i = i + 1) {
									var id = x[i].split("-")[0];
									var title = x[i].split("-")[1];
									topicsPart += "<a href=\"@{TopicIdeaController.checkAuthorizationToViewTopic()}?topicId=" + id +"\">"+ title + "</a> ";
									topicsPart += "<a href = '#' onclick = \"getInsideTopic('"
											+ ""
											+ user
											+ "','"
											+ x[i]
											+ "')\">" + "expand" + "</a></p>";
									topicsPart += "<div id = \"topic" + x[i] + "\"></div>";
								}
								document.getElementById("createdTopics").innerHTML = topicsPart;
							}
						});
	}
</script>

<script type="text/javascript">
	function showTopicsFollowed() {
		var user = '${user}';
		$
				.getJSON(
						'@{BrowseController.browseFollowedTopics()}',
						{
							'userName' : user
						},
						function(data) {
							var topics = data.followedTopics;
							var topicsPart = "";
							if (topics == null || topics == "") {
								document.getElementById("followedTopics").innerHTML = "No topics to show";
							} else {
								var x = topics.split("&&");
								topicsPart = "";
								for ( var i = 0; i < x.length-1; i = i + 1) {
									var id = x[i].split("-")[0];
									var title = x[i].split("-")[1];
									topicsPart += "<p> <a href=\"@{TopicIdeaController.checkAuthorizationToViewTopic()}?topicId=" + id +"\">"+ title + "</a> ";
									topicsPart += "<a href = '#' onclick = \"getInsideTopic('"
											+ ""
											+ user
											+ "','"
											+ x[i]
											+ "')\">" + "expand" + "</a></p>";
									topicsPart += "<div id = \"topic" + x[i] + "\"></div>";
								}
								document.getElementById("followedTopics").innerHTML = topicsPart;
							}
						});
	}
</script>

<script type="text/javascript">
	function showTopicsManaged() {
		var user = '${user}';
		$
				.getJSON(
						'@{BrowseController.browseManagedTopics()}',
						{
							'userName' : user
						},
						function(data) {
							var topics = data.managedTopics;
							var topicsPart = "";
							if (topics == null || topics == "") {
								document.getElementById("managedTopics").innerHTML = "No topics to show";
							} else {
								var x = topics.split("&&");
								topicsPart = "";
								for ( var i = 0; i < x.length-1; i = i + 1) {
									var id = x[i].split("-")[0];
									var title = x[i].split("-")[1];
									topicsPart += "<p> <a href=\"@{TopicIdeaController.checkAuthorizationToViewTopic()}?topicId=" + id +"\">" + title + "</a> ";
									topicsPart += "<a href = '#' onclick = \"getInsideTopic('"
											+ ""
											+ user
											+ "','"
											+ x[i]
											+ "')\">" + "expand" + "</a></p>";
									topicsPart += "<div id = \"topic" + x[i] + "\"></div>";
								}
								document.getElementById("managedTopics").innerHTML = topicsPart;
							}
						});
	}
</script>

<script type="text/javascript">
	function getInsideTopic(userName, topic) {
		var user = userName;
		var topicId = (topic.split("-"))[0];
		var desiredTopic = "topic" + topic;
		$
				.getJSON(
						'@{BrowseController.showTopicContents()}',
						{
							'topicId' : topicId,
							'userName' : user
						},
						function(data) {
							var ideas = data.ideas;
							var ideasPart = "";
							if (ideas == null || ideas == "") {
								document.getElementById(desiredTopic).innerHTML = "No ideas to show";
							} else {
								var y = ideas.split("&&");
								for ( var j = 0; j < y.length-1; j = j + 1) {
									var id = y[j].split("-")[0];
									var title = y[j].split("-")[1];
									ideasPart +="<p><a href=\"@{TopicIdeaController.checkAuthorizationToViewIdea()}?ideaId=" + id +"\">" + title + "</a></p>";
								}
								document.getElementById(desiredTopic).innerHTML = "";
								document.getElementById(desiredTopic).innerHTML = ideasPart;
								$('#'+ desiredTopic+ '').hide();
								$('#'+ desiredTopic+ '').slideDown(1000);
							}

						});
	}
</script>
<script type="text/javascript">
	function showTopicOption(topicDiv) {
		if (topicDiv == "createdTopics") {
			$('#followedTopics').hide(1000);
			$('#managedTopics').hide(1000);
			$('#createdTopics').toggle(1000);
		} else if (topicDiv == 'followedTopics') {
			$('#createdTopics').hide(1000);
			$('#managedTopics').hide(1000);
			$('#followedTopics').toggle(1000);
		} else if (topicDiv == 'managedTopics') {
			$('#followedTopics').hide(1000);
			$('#createdTopics').hide(1000);
			$('#managedTopics').toggle(1000);
		} else {
			$('#followedTopics').hide(1000);
			$('#createdTopics').hide(1000);
			$('#managedTopics').hide(1000);

		}
	}
</script>


</head>
<body>
<p id="topicOptions">
		<a href='#' onclick="showTopicOption('createdTopics')"> Created
			Topics</a> <a href='#' onclick="showTopicOption('followedTopics')">
			Followed Topics</a> <a href='#'
			onclick="showTopicOption('managedTopics')"> Managed Topics</a>
	</p>

<div id="createdTopics" value="hidden"></div>
	<div id="followedTopics" value="hidden"></div>
	<div id="managedTopics" value="hidden"></div>
	

</body>
</html>